<script lang="ts">
    import Icon from "../Common/Icons/Icon.svelte";
    import { useStyle } from "../utils/useStyle";

    const props = $props();
    let bgColorStyle = $state<any>({});
    $effect(() => {
        const style = props.open
            ? {
                  background: `rgba(${props.currentValue.rgba.r},${props.currentValue.rgba.g},${props.currentValue.rgba.b},${props.currentValue.rgba.a})`,
              }
            : { background: props.value };
        bgColorStyle = style;
    });
</script>

<div class="cm-color-picker-value" tabIndex="0">
    <!-- 文字对齐辅助 -->
    <span style="width: 0px; font-size: 12px; visibility: hidden; line-height: initial">A</span>
    <input type="hidden" name={props.name} value={props.value} />
    <div class="cm-select-color-wrap">
        {#if bgColorStyle.background}
            <div class="cm-select-color" style={useStyle({}, bgColorStyle)}></div>
        {:else}
            <div class="cm-select-color cm-select-color-empty">
                <Icon icon="times" />
            </div>
        {/if}
    </div>
</div>
